<template>
	<view class="content">
		<login-notice-view v-if="showLogin" />
		<block v-else>
			<view class="cell_content app_content_color">
				<image class="cell_avatar app_background_color" mode="aspectFill" :src="user.avatar"></image>
				<view class="cell_info_content">
					<view class="cell_info_username_text">{{user.userName}}</view>
					<view class="cell_info_user_title_content">
						<view class="cell_info_user_title app_background_color app_title_color">{{user.userTitle}}</view>
						<view class="cell_info_content"></view>
					</view>

				</view>
			</view>
			<view class="cell_content app_content_color" @tap="cellTap" data-type="topic">
				<view class="cell_info_content">
					<view class="cell_info_cell_title_text app_title_color">我发表的</view>
					<view class="cell_info_cell_subtitle_text app_subtitle_color">不管是不是水贴，反正没事写了点啥</view>
				</view>
				<image class="cell_arrow_icon" mode="aspectFit" src="../../static/arrow_icon.png"></image>
			</view>
			<view class="cell_content app_content_color" @tap="cellTap" data-type="favorite">
				<view class="cell_info_content">
					<view class="cell_info_cell_title_text app_title_color">我收藏的</view>
					<view class="cell_info_cell_subtitle_text app_subtitle_color">这篇帖子本人喜欢，不许反驳</view>
				</view>
				<image class="cell_arrow_icon" mode="aspectFit" src="../../static/arrow_icon.png"></image>
			</view>
			<view class="cell_content app_content_color" @tap="cellTap" data-type="reply">
				<view class="cell_info_content">
					<view class="cell_info_cell_title_text app_title_color">我回复的</view>
					<view class="cell_info_cell_subtitle_text app_subtitle_color">不管是不是在灌水，反正回复了点啥</view>
				</view>
				<image class="cell_arrow_icon" mode="aspectFit" src="../../static/arrow_icon.png"></image>
			</view>
			<view class="logout_button app_content_color app_title_color" @tap="logoutButtonTap">
				<view>退出登录</view>
			</view>
		</block>
	</view>
</template>

<script>
	import http from "../../utils/http.js"

	export default {
		data() {
			return {
				user: {},
				showLogin:true
			}
		},
		onLoad() {
			this.loadData()
		},
		onShow() {
			let showLogin = getApp().globalData.user == null
			if(this.showLogin != showLogin){
				this.showLogin = showLogin
				if(!showLogin){
					this.loadData()
				}
			}
		},
		methods: {
			loadData(){
				this.user = getApp().globalData.user;
			},
			cellTap(e) {
				var type = e.currentTarget.dataset.type;
				uni.navigateTo({
					url: "../user-post-list/user-post-list?type=" + type + "&uid=" + this.user.uid
				})
			},
			logoutButtonTap() {
				uni.showModal({
					title: "提示",
					content: "确定退出登录么？",
					confirmText: "退出登录",
					success: function(res) {
						if (res.confirm) {
							uni.showLoading()
							uni.removeStorage({
								key: "uni_user_data",
								success: function() {
									uni.hideLoading()
									http.setAccessSecret("");
									http.setAccessToken("");
									getApp().globalData.user = null
									uni.reLaunch({
										url: "../home/home"
									})
								},
								fail: function() {
									uni.hideLoading()
									uni.showToast({
										title: "退出登录失败",
										icon: "none"
									})
								}
							})
						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.cell_content {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 1upx;
		padding-top: 30upx;
		padding-bottom: 30upx;
		padding-left: 20upx;
	}

	.cell_avatar {
		width: 100upx;
		height: 100upx;
		margin-left: 30upx;
		margin-top: 50upx;
		margin-bottom: 30upx;
		border-radius: 8upx;
	}

	.cell_info_content {
		display: flex;
		flex-direction: column;
		margin-left: 20upx;
		flex-grow: 1;
	}

	.cell_info_username_text {
		font-size: 30upx;
		margin-top: 30upx;
	}

	.cell_info_user_title_content {
		display: flex;
		flex-direction: row;
	}

	.cell_info_user_title {
		display: flex;
		border-radius: 4upx;
		height: 30upx;
		padding-left: 10upx;
		padding-right: 10upx;
		align-items: center;
		justify-content: center;
		font-size: 20upx;
		margin-top: 20upx;
	}

	.cell_icon {
		width: 60upx;
		height: 60upx;
		margin-left: 30upx;
		margin-top: 50upx;
		margin-bottom: 50upx;
	}

	.cell_info_cell_title_text {
		font-size: 30upx;
	}

	.cell_info_cell_subtitle_text {
		font-size: 20upx;
		margin-top: 10upx;
	}

	.cell_arrow_icon {
		margin-right: 30upx;
		margin-left: 20upx;
		width: 30upx;
		height: 30upx;
	}

	.logout_button {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		margin-top: 30upx;
		margin-left: 30upx;
		margin-right: 30upx;
		margin-bottom: 30upx;
		height: 100upx;
		border-radius: 50upx;
	}

</style>
